<template>
  <view class="loading" style="position: relative; width: 750rpx; height: 100vh; text-align: center;" v-if="isLoading">
    <view class="text position-center" style="width: 750rpx;">
      {{ loadingTitle }}
    </view>
  </view>
  <view class="order-details order-details-index" v-else>
    <view class="title">
      收件人信息
    </view>
    <!-- 收件信息 -->
    <view class="get-info flex-column-around">
      <view v-if="address">
      	<view class="get-person info">
      	  <text class="label">收件人:</text> {{ address.recvPerson?address.recvPerson:"暂无收件人" }}
      	</view>
      	<view class="get-address info">
      	  <text class="label">收件地址:</text> {{ address.recvAddr }}
      	</view>
      	<view class="get-phone info">
      	  <text class="label">收件人电话:</text> {{ address.recvTel }}
      	</view>
      </view>
	  <view v-else style="font-weight: bold;color: red;">
	  	收件地址已被删除
	  </view>
    </view>
    <view class="title" v-if="orderInfo.orderStatus < 3 || orderInfo.wlcmpno==null">
      物流信息
    </view>
     <!-- 物流信息 -->
    <view class="logistics" v-if="orderInfo.orderStatus >= 3 && orderInfo.wlcmpno">
          <view class="title" @click="toggleLogistics">
            {{ showLogistics ? '收起物流信息' : '展开物流信息' }}
          </view>
          <view class="details-info" v-show="showLogistics">
            <uni-steps :options="logisticsSteps" direction="column" :active="currentAddress"></uni-steps>
          </view>
    </view>
    <view class="logistics" v-else>
        <view class="no-logistics">
            商品暂未发货
        </view>
    </view>
    <view class="title">
      订单产品
    </view>
    <view class="product-body-out">
      <!-- 商品 -->
      <scroll-view class="product-body" style="height: 500rpx;">
        <view class="product" v-for="item in displayedProducts" :key="item.advProductsId">
          <view class="product-image">
            <view class="image">
              <image :src="baseUrl + item.productImage"></image>
            </view>
          </view>
          <view class="product-info">
            <view class="product-name">
              {{ item.productName }}
            </view>
            <view class="product-price flex-row">
              <view class="price">
                <text>￥</text>
                <text style="font-size: 20px;">{{ item.productPrice }}</text>
              </view>
              <view class="control-num">
                数量: {{ item.ordersNum }}
              </view>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
    <view class="nothing"></view>
    <!-- 底部 -->
  <!--  <view class="bottom-my flex-row">
      <view class="all-price">
        <text>￥</text> 
        <text style="font-size: 20px; font-weight: bold;">{{ orderInfo.ordersamount }}</text>
      </view>
      <view class="button submit" @click="toggle('bottom')">
        <text>{{ getDo(orderStatus) }}</text>
      </view>
    </view> -->
  </view>

<!--  <view class="dia">
    <uni-popup border-radius="20px 20px 0 0" ref="popup" :type="type" v-show="true" backgroundColor="#eee" style="overflow: auto;">
      <view class="top">
        <view class="price">
          <text>￥</text>
          <text style="font-size: 20px; font-weight: bold;">{{ orderInfo.ordersamount }}</text>
        </view>
      </view>
      <view class="pay-type flex-row">
        <view class="left flex-row">
          <view class="pay-icon">
            <image src="https://img1.baidu.com/it/u=1471529724,2678837426&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1717174800&t=62f0fd5c2a8703e362c3ea58e3906439" alt="" />
          </view>
          <view class="pay-name">
            微信支付
          </view>
        </view>
        <view class="right">
          <label class="radio">
            <radio value="1" checked="true"/>
          </label>
        </view>
      </view>
      <view class="yes-button">
        <view class="btn-body" @click="pay">
          确认付款
        </view>
      </view>
    </uni-popup>
  </view> -->
</template>

<script>
import { BASE_IMAGE_URL } from '../../../utils/CommonValues';
import request from '../../../utils/request';

export default {
  data() {
    return {
      loadingTitle: '加载中...',
      isLoading: true,
      baseUrl: BASE_IMAGE_URL,
      address: {},
      advOrdersId: '',
      orderInfo: {},
      productList: [],
      orderStatus: '',
      logisticsSteps: [],
      currentAddress: 0,
      type: '', // 弹窗类型
      showLogistics: false, // 控制物流信息展开收起的状态
    };
  },
  computed: {
    // 计算属性，根据 showLogistics 状态决定显示的商品列表
    displayedProducts() {
      // 默认显示前三个商品，展开后显示全部商品
      if (this.showLogistics) {
        return this.productList;
      } else {
        return this.productList.slice(0, 3); // 只显示前三个商品
      }
    }
  },
  onLoad(option) {
    this.advOrdersId = option.advOrdersId;
    this.orderStatus = +option.orderStatus;

    request.GET(`/system/orders/${this.advOrdersId}`, null).then(response => {
      this.orderInfo = response.data;
      console.log("orderInfo--->", response);
      
      // 获取地址信息
      request.GET(`/system/membersaddr/${this.orderInfo.advMembersaddrId}`, null).then(res => {
        this.address = res.data;
        console.log("address--->", res);    
      }).catch(err => {
        console.error("Error fetching address information:", err);
      });

      // 获取订单产品列表
      request.GET(`/system/ordersdetail/productList`, { advOrdersId: this.orderInfo.advOrdersId }).then(res => {
        this.productList = res.rows;
        console.log("productList--->", res);
        this.isLoading = false; // 数据加载完成，设置isLoading为false
      }).catch(err => {
        console.error("Error fetching order details:", err);
        this.isLoading = false; // 如果出错也需要结束加载状态
      });

       // 物流信息
      if (this.orderInfo.orderStatus >= 3 && this.orderInfo.wlcmpno) {
        request.POST("/kuaidi100/query", {
          com: this.orderInfo.wlcmpno,
          num: this.orderInfo.delivesno
        }).then(res => {
          if (res.data && Array.isArray(res.data.data)) {
            this.logisticsSteps = res.data.data.map((step, index) => ({
              title: step.context,
              content: step.time,
              icon: index === 0 ? 'success' : 'circle'
            }));
          } else {
            console.error("Unexpected response data format for logistics:", res.data);
          }
        }).catch(err => {
          console.error("Error fetching logistics information:", err);
        });
      }
    }).catch(err => {
      console.error("Error fetching order information:", err);
      this.isLoading = false; // 如果出错也需要结束加载状态
    });
  },
  methods: {
    // 获取操作标签
    getDo(status) {
      switch (status) {
        case 1: return '付款';
        case 2: return ''; // 已付款，无需操作
        case 3: return '确认收货';
        case 4: return '退款/换货';
        case 5: return ''; // 退款中，无需操作
        case 6: return ''; // 已退款，无需操作
        case 7: return ''; // 退换货中，无需操作
        case 8: return ''; // 已完成，无需操作
        default: return '';
      }
    },
    // 弹窗开启
    toggle(type) {
      switch (this.orderStatus) {
        case 1:
          this.type = type;
          this.$refs.popup.open(type);
          break;
        case 3:
          // 3为确认收货
          request.GET(`/system/orders/get/${this.advOrdersId}`, null).then(response => {
            console.log(response);
          }).catch(err => {
            console.error("Error fetching order information:", err);
          });
          break;
        // case 2, 4 为退款，可以添加相应逻辑
		case 4:
			break;
        default:
          break;
      }
    },
    // 点击物流信息标题栏展开或收起物流信息
    toggleLogistics() {
      this.showLogistics = !this.showLogistics;
    },
    // 确认付款
    pay() {
      uni.showToast({
        title: "成功支付"
      });
    }
  }
};
</script>

<style lang="less">
.get-info {
  width: 700rpx;
  height: 100px;
  align-items: flex-start;
  margin: 0 auto;
  .label {
    color: #aaa;
  }
}
.logistics {
  width: 700rpx;
  margin: 0 auto;
}

.title {
  box-sizing: border-box;
  width: 700rpx;
  height: 30px;
  line-height: 30px;
  margin: 10px auto;
  border-left: 5px solid skyblue;
  padding-left: 10px;
  font-weight: bold;
}
.product-body-out {
  width: 700rpx;
  margin: 0 auto;
}
.product-body {
  width: 700rpx;
  margin: 10px auto;
}
.product {
  display: flex;
  margin-bottom: 10px;
}
.product-image {
  width: 180rpx;
  height: 180rpx;
}
.product-image .image {
  width: 100%;
  height: 100%;
}
.product-info {
  flex: 1;
  margin-left: 10px;
}
.product-name {
  font-size: 18px;
  margin-bottom: 5px;
}
.product-price {
  display: flex;
  align-items: center;
}
.price {
  color: red;
  font-size: 14px;
}
.control-num {
  font-size: 14px;
  color: #aaa;
  margin-left: 10px;
}
.bottom-my {
  width: 750rpx;
  height: 100rpx;
  border-top: 1rpx solid #eee;
  position: fixed;
  bottom: 0;
  left: 0;
  background: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
}
.all-price {
  font-size: 20px;
  font-weight: bold;
  color: red;
}
.button {
  width: 150px;
  height: 60px;
  line-height: 60px;
  text-align: center;
  background-color: skyblue;
  color: white;
  border-radius: 5px;
}
.no-logistics {
  width: 700rpx;
  margin: 10px auto;
  text-align: center;
  color: #aaa;
}
</style>